<script setup>
import { useUserStore } from '@/stores/index'
import { ref } from 'vue'
const onClick = (e) => {
  const li = document.querySelector('.left ul li.active')
  if (li) {
    li.classList.remove('active')
  }
  e.target.classList.add('active')
}

const userStore = useUserStore()
const User = ref({})
User.value = userStore.user
</script>
<template>
  <div class="user-container">
    <el-row :gutter="20">
      <el-col :span="5" :offset="1">
        <div class="left">
          <!-- 根据用户角色显示不同菜单
                2.代表商家 
          -->
          <ul v-if="User.role === '2'">
            <router-link to="/boss/published">
              <li @click="onClick" class="active">已发布</li></router-link
            >
            <router-link to="/boss/publish"> <li @click="onClick">发布游戏</li></router-link>
            <router-link to="/boss/upload"> <li @click="onClick">上传游戏</li></router-link>
            <router-link to="/boss/sort"> <li @click="onClick">分类管理</li></router-link>
            <router-link to="/boss/order"><li @click="onClick">订单管理</li></router-link>
            <router-link to="/boss/count"><li @click="onClick">统计分析</li></router-link>
            <router-link to="/boss/library"><li @click="onClick">游戏仓库</li></router-link>
          </ul>

          <!-- 1.代表管理员 -->
          <ul v-else-if="User.role === '1'">
            <router-link to="/boss/auditGame">
              <li @click="onClick" class="active">审批列表</li></router-link
            >
            <router-link to="/boss/manageUser"> <li @click="onClick">用户管理</li></router-link>
          </ul>
        </div></el-col
      >
      <el-col :span="17">
        <div class="right">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.user-container {
  border-radius: 10px;
  margin: 0 auto;
  width: 1200px;
  padding-top: 20px;
  height: 720px;

  .left {
    margin-top: 25px;
    height: 300px;
    width: 200px;
    border-radius: 10px;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);

    ul {
      list-style: none;
      padding: 10px;
      margin: 10px 40px;

      li {
        margin-top: 15px;
        font-size: 18px;
        color: #fff;
        cursor: pointer;
      }

      li:hover {
        color: #536976;
      }

      //点击之后的样式
      li.active {
        color: rgb(64, 158, 255);
      }
    }
  }

  .right {
    margin-top: 15px;
    height: -webkit-fill-available;
    background-color: #fff;

    border-radius: 10px;
    padding: 30px;
    margin-bottom: 20px;
  }
}
</style>
